<template>
    <div class="goods-wrap">
        <p class="title">全部商品</p>
        <div class="goods-list">
            <div 
            class="item" 
            v-for="item in goodsList" :key="item._id">
                <img 
                :src="item.src" 
                class="goods-img"
                @click="goDetails(item)">
                <p class="name">{{item.goods_name}}</p>
                <div class="wrap">
                    <p class="price"><span>￥</span>{{item.goods_price}}</p>
                    <img src="@/assets/add.png" alt="" id="add"  @click="addGoods(item)">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"GoodsList-Home",
        props:['goodsList'],
        data(){
            return {
                isSend:false
            }
        },
        methods: {
           // 详情页跳转
            goDetails(item){
                this.$router.push({
                    path:"/details",
                    query:{
                        _id:item._id
                    }
                })
            },

            // 发送添加到用户购物车的请求
            addGoods(item){
                if(this.isSend === false){
                    this.$store.dispatch('Home/addGoods',item)
                    this.isSend = true
                    setTimeout(()=>{
                        this.$store.dispatch('Home/searchGoodsIntheCar')
                    },40)
                    setTimeout(()=>{
                        this.isSend = false
                    },1000)
                }
            }
        },
    }
</script>

<style scoped lang="less">
    .goods-wrap{
        width: 95%;
        margin: 0 auto;
        padding-top: 2.1vw;
       
       

        .title{
            font-size: 4.8vw;
            color: #333;
            font-weight: 600;
            margin-left: 3.2vw;
            padding-bottom: 2.7vw;
           
        }

        .goods-list{
            margin-bottom: 2.7vw;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            

            .item{
                width: 48.5%;
                padding: 2.7vw 0;
                border-radius: 2.7vw;
                background: #fff;
                margin-bottom: 2.7vw;

                .goods-img{
                    width: 100%;
                    height: 45.3vw;
                }

                .name{
                    font-size: 3.7vw;
                    font-weight: 600;
                    text-align: center;
                }

                .wrap{
                    display: flex;
                    padding-top: 2.7vw;
                    justify-content: space-around;
                    .price{
                        font-weight: 600;
                        color: #F22534;
                        font-size: 4.8vw;
                        span{
                            font-size: 3.2vw;
                        }
                    }

                    #add{
                        width: 25px;
                        height: 25px;
                    }
                }
                
            }
        }
    }
</style>